<template>
  <div class="third">
    <div class="header">
      <div class="title">选择策略</div>
    </div>
    <div class="tabs">
      <div
        class="tab-item"
        :class="{ active: currentStrategy.id === item.id }"
        v-for="item in strategyList"
        :key="item.id"
        @click="handleTabClick(item)"
      >
        <div class="tab-item-title">{{ item.name }}</div>
      </div>
    </div>
    <div class="content">
      <div class="desc-box">
        <div class="desc">{{ currentStrategy.desc1 }}</div>
        <div class="desc">{{ currentStrategy.desc2 }}</div>
      </div>
    </div>
    <div class="other-strategy">
      <div class="other-strategy-title">你也可以自行调整策略</div>
    </div>
    <div class="slider-container">
      <div class="slider-box">
        <div class="slider-labels">
          <span class="item0">
            冲 {{ currentStrategy.rushNum }} 个
            {{ currentStrategy.rushPercent }}
          </span>
          <span class="item1">
            稳 {{ currentStrategy.steadyNum }} 个
            {{ currentStrategy.steadyPercent }}
          </span>
          <span class="item2">
            保 {{ currentStrategy.guaranteedNum }} 个
            {{ currentStrategy.guaranteedPercent }}
          </span>
        </div>
        <van-slider
          v-model="scoreRange"
          :min="minScore"
          :max="maxScore"
          range
          bar-height="10px"
          @change="onChange"
        >
          <template #left-button>
            <div class="custom-button"></div>
          </template>
          <template #right-button>
            <div class="custom-button"></div>
          </template>
        </van-slider>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useVolunteerStore } from '@/store/volunteer';
import { getVolunteerCurInfo } from '@/api/volunteer';

const store = useVolunteerStore();

const strategyList = reactive([
  {
    id: 1,
    name: '我要冲！',
    desc1:
      '尽量填满志愿，且按照冲稳保梯度依次排序。以冲40%、稳40%、保20%的比例进行填报。',
    desc2: '尽力冲、确定稳、稳妥保。不浪费分数，捡漏高分院校，风险程度一般。',
    rushNum: 0,
    steadyNum: 0,
    guaranteedNum: 0,
    rushPercent: '40%',
    steadyPercent: '40%',
    guaranteedPercent: '20%',
  },
  {
    id: 2,
    name: '均衡',
    desc1:
      '尽量填满志愿，且按照冲稳保梯度依次排序。以冲20%、稳60%、保20%的比例进行填报。',
    desc2: '尝试冲、保证稳、稳妥保。均衡选择，有冲有稳有保，风险程度较低',
    rushNum: 0,
    steadyNum: 0,
    guaranteedNum: 0,
    rushPercent: '20%',
    steadyPercent: '60%',
    guaranteedPercent: '20%',
  },
  {
    id: 3,
    name: '稳健',
    desc1:
      '尽量填满志愿，且按照冲稳保梯度依次排序。以冲0%、稳60%、保40%的比例进行填报。',
    desc2: '不冲、保证稳、一定保。稳妥选择，全部稳和保，风险程度最低。',
    rushNum: 0,
    steadyNum: 0,
    guaranteedNum: 0,
    rushPercent: '0%',
    steadyPercent: '60%',
    guaranteedPercent: '40%',
  },
]);

const proportions = [
  { chong: 0.4, wen: 0.4, bao: 0.2 },
  { chong: 0.2, wen: 0.6, bao: 0.2 },
  { chong: 0, wen: 0.6, bao: 0.4 },
];

const currentStrategy = reactive({
  id: 1,
  name: '我要冲！',
  desc1:
    '尽量填满志愿，且按照冲稳保梯度依次排序。以冲40%、稳40%、保20%的比例进行填报。',
  desc2: '尽力冲、确定稳、稳妥保。不浪费分数，捡漏高分院校，风险程度一般。',
  rushNum: 0,
  steadyNum: 0,
  guaranteedNum: 0,
  rushPercent: '40%',
  steadyPercent: '40%',
  guaranteedPercent: '20%',
});

const scoreRange = ref([18, 36]);
const minScore = ref(0);
const maxScore = ref(45);

const onChange = (value) => {
  scoreRange.value = value;
  // 根据最新得到的数据动态计算
  currentStrategy.rushNum = value[0];
  currentStrategy.steadyNum = value[1] - value[0];
  currentStrategy.guaranteedNum = maxScore.value - value[1];

  // 计算百分比，确保总和为100%
  const rushPercent = Math.floor((value[0] / maxScore.value) * 100);
  const steadyPercent = Math.ceil(
    (currentStrategy.steadyNum / maxScore.value) * 100
  );
  const guaranteedPercent = 100 - rushPercent - steadyPercent;

  currentStrategy.rushPercent = `${rushPercent}%`;
  currentStrategy.steadyPercent = `${steadyPercent}%`;
  currentStrategy.guaranteedPercent = `${guaranteedPercent}%`;
};

// 获取初始化时候的scoreRange
const getInitScoreRange = () => {
  const { chong, wen } = proportions[currentStrategy.id - 1];
  const rushNum = Math.ceil(maxScore.value * chong);
  const steadyNum = Math.ceil(maxScore.value * wen);
  scoreRange.value = [rushNum, steadyNum + rushNum];
};

// 计算三段式滑块的背景色
const getSliderBackground = () => {
  const [chong, wen] = scoreRange.value;
  const total = maxScore.value;
  const rushPercent = (chong / total) * 100;
  const steadyPercent = (wen / total) * 100;

  return `linear-gradient(
    to right,
    #ff4d4f 0%,
    #ff4d4f ${rushPercent}%,
    #1890ff ${rushPercent}%,
    #1890ff ${steadyPercent}%,
    #52c41a ${steadyPercent}%,
    #52c41a 100%
  )`;
};

const handleTabClick = (item) => {
  Object.assign(currentStrategy, item);
  calculateProportions();
  getInitScoreRange();
  store.setThirdStepData(currentStrategy);
};

const calculateProportions = () => {
  // 计算当前策略的冲稳保个数
  const { chong, wen, bao } = proportions[currentStrategy.id - 1];
  const rushNum = Math.ceil(maxScore.value * chong);
  const steadyNum = Math.ceil(maxScore.value * wen);
  const guaranteedNum = Math.ceil(maxScore.value * bao);
  currentStrategy.rushNum = rushNum;
  currentStrategy.steadyNum = steadyNum;
  currentStrategy.guaranteedNum = guaranteedNum;
};

const defaultBatchType = computed(() => store.defaultBatchType);
const volunteerInfo = computed(() => store.volunteerInfo);
const getVolunteerCurInfoFn = async () => {
  const params = {
    batchType: defaultBatchType.value,
    rankNum: volunteerInfo.value.position,
    regionId: volunteerInfo.value.regionId,
    score: volunteerInfo.value.score,
    subject: volunteerInfo.value.relSubject,
  };
  const res = await getVolunteerCurInfo(params);
  if (res.code == 200) {
    const totalVolunteerNum = res.data.totalVolunteerNum;
    maxScore.value = totalVolunteerNum;
    calculateProportions();
    getInitScoreRange();
  }
};

getVolunteerCurInfoFn();

onMounted(() => {
  store.setThirdStepData(currentStrategy);
});
</script>

<style scoped lang="scss">
.third {
  height: 100%;
  overflow-y: auto;
  padding: 28px;
  box-sizing: border-box;
  .header {
    .title {
      font-size: 28px;
      font-weight: bold;
    }
  }
  .tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -32px;
    .tab-item {
      display: flex;
      align-items: center;
      padding: 8px 88px;
      color: #000000;
      font-size: 26px;
      font-weight: bold;
      &:nth-child(2) {
        position: relative;
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 12px;
          width: 2px;
          height: 18px;
          background-color: #bec9d7;
          display: v-bind('currentStrategy.id === 3 ? "block" : "none"');
        }
        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 12px;
          width: 2px;
          height: 18px;
          background-color: #bec9d7;
          display: v-bind('currentStrategy.id === 1 ? "block" : "none"');
        }
      }
      &.active {
        color: $primary-color;
        background: #e5edff;
        border-radius: 18px 18px 0px 0px;
      }
    }
  }
  .content {
    padding: 28px 0;
    background: #f5f8f9;
    border-radius: 8px;
    .desc-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      .desc {
        line-height: 32px;
        font-size: 25px;
        color: #333;
        line-height: 24px;
        padding: 10px 0;
        display: inline-block;
        max-width: 100%;
      }
    }
  }
  .slider-container {
    background: #e9f9ff;
    border-radius: 8px;
    padding: 52px 0 52px 0;
    .slider-box {
      width: 55%;
      margin: 0 auto;
      position: relative;
      :deep(.van-slider) {
        background: v-bind(getSliderBackground());
      }

      .custom-button {
        width: 24px;
        height: 24px;
        background: $primary-color;
        border: 4px solid #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
      }

      .slider-labels {
        width: 70%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 42px;
        color: #666;
        font-size: 26px;
        font-weight: bold;
        .item0 {
          color: #ff4d4f;
        }
        .item1 {
          color: #1890ff;
        }
        .item2 {
          color: #52c41a;
        }
      }
    }
  }
  .other-strategy {
    font-weight: bold;
    font-size: 22px;
    color: #333333;
    line-height: 40px;
    padding: 18px 0 12px 0;
  }
}
</style>
